<!-- 列表里展示内容过多时，加省略号并 tooltip 提示 -->
<template>
  <div>
    <el-tooltip placement="bottom" effect="light" v-if="prop.textVal && prop.textVal.length > prop.textNum">
      <template #content>
        <div style="width: 300px">{{ prop.textVal }}</div>
      </template>
      <span>{{ prop.textVal.slice(0, 32) + "..." }}</span>
    </el-tooltip>
    <div v-else>{{ prop.textVal || "-" }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const prop = defineProps({
  textVal: "", // 文字字数大于多少加省略号
  textNum: {
    type: Number,
    default: 32
  }
})
</script>
